<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.web{
				width: 500px;
				margin: 20px auto;
			}
			.option{
				font-size: 16px;
				border-bottom: 1px solid #bbb;
			}
			.option li{
				margin-bottom: 20px;
			}
			.option span{
				display: inline-block;
				color: #666;
				padding: 5px 10px;
				border: 2px solid #999;
			}
			.option li>span{
				cursor: pointer;
			}
			.option p{
				/*font-weight: bold;*/
				display: inline-block;
				width: 50px;
				text-align: center;
				color: #000;
				border: 1px solid transparent;
			}
			.option .active{
				border: 2px solid #f60;
			}
			.price{
				margin-top: 20px;
			}
			.price em{
				font-style: normal;
				font-size: 22px;
				color: #f60;
			}
			input{
				width: 380px;
				height: 45px;
				line-height: 45px;
				background: #f60;
				border: none;
				outline: none;
				color: #fff;
				font-size: 23px;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div class="web">
			<ul class="option">
				<li class="type model">
					<p>型号</p>
					<span class="active">4.7英寸</span>
					<span>5.5英寸</span>
				</li>
				<li class="type color">
					<p>颜色</p>
					<span class="active">银色</span>
					<span>金色</span>
					<span>深空灰色</span>
				</li>
				<li class="type Memory">
					<p>内存</p>
					<span class="active">16GB</span>
					<span>64GB</span>
					<span>128GB</span>
				</li>
				<li class="type edition">
					<p>版本</p>
					<span class="active">公开版</span>
					<span>移动赠费版</span>
					<span>联通合约版</span>
				</li>
			</ul>
			<div class="price">价格：<em>￥5288.00</em></div>
			<input type="button" onclick="alert('2345')" value="立即购买" />
		</div>
		<script type="text/javascript">
			var aSpan =document.querySelectorAll("span");
			var models =document.querySelectorAll(".model span");
			var me=document.querySelectorAll(".Memory span");
			var tPrice=document.querySelector(".price em");
			for(var i=0;i<aSpan.length;i++){
				aSpan[i].addEventListener("click",function(){
					var allChild = this .parentNode.children;
					for(var j=1;j<allChild.length;j++){
						allChild[j].classList.remove("active");
					}
					this.classList.add("active");
					Price();
				})
			}
			function Price(){
				var p1=0;//表示型号的价格
				var p2=0;//表示内存的价格
				//models
				//ele.classList.contains(className)用来检测这个元素里面是否有类名
				for(var i=0;i<models.length;i++){
					if(models[i].classList.contains("active")){
						p1 = i==0?5288:6088;
					}
					
				}
				for(var k=0;k<me.length;k++){
					if(me[k].classList.contains("active")){
						p2 = k==0?0:k==1?800:1600;
					}
				}
				tPrice.innerText="￥"+(p1+p2).toFixed(2);
			}
			
		</script>
	</body>
</html>
